{include file="public/header-static"/} {include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="title ">
                <div class="list-title" style="margin-bottom: 10px;">
                    {include file="lore/title"/}
                </div>
            </div>

            <div class="row" id="allData">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card bor" style="height: calc( 100% - 45px ) ;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">访问数据</div>
                                        <div class="u-rig" id="allDataTotal">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <i class="icon"></i>
                                                    <text class="str">知识访问总数</text>
                                                </div>
                                                <div class="bg-str" style="margin-left: 15px;">
                                                    {$access.totalArticleViews}
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <i class="icon" style="background-color: #F74AFFFF;"></i>
                                                    <text class="str">{$sourceName}访问数</text>
                                                </div>
                                                <div class="bg-str" style="margin-left: 15px;">
                                                    {$access.currentArticleViews.viewNums}
                                                    <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                                    <div id="omitBox" class="omitBox">
                                                        {volist name="access.currentArticleViews.usersList" id="vo"}
                                                        <text class="omitData">{$vo.name}：{$vo.usersNums}</text> {/volist}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="str">其他来源</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$access.otherArticleView.viewNums}
                                                    <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                                    <div id="omitBox" class="omitBox2" style="padding-left: 5px; left: -16%;">
                                                        {volist name="access.otherArticleView.cateList" id="vo"}
                                                        <text class="omitData">{$vo.name}：{$vo.usersNums}</text> {/volist}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <canvas id="viewData"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="margin-bottom: 16px;">
                                <div class="card-dth" style="height: 170px;">
                                    <div style="display: flex;justify-content: space-between;width: 95%;">
                                        <div class="user-name">部门访问数据

                                        </div>
                                        <!--                                        <i>-->
                                        <!--                                            <img style="width: 28px; height: 28px;"-->
                                        <!--                                                 src="__STATIC__/assets/media/image/calendar.png">-->
                                        <!--                                        </i>-->
                                    </div>

                                    <div class="totalDataTitle">
                                        <div class="item">
                                            <p>当月总访问</p>
                                            <span>{$branch.monthArticleView}</span>
                                        </div>
                                        <div class="item">
                                            <p>提成点</p>
                                            <span>{$branch.commission_ratio}</span>
                                        </div>
                                        <div class="item">
                                            <p>所得佣金</p>
                                            <span>{$branch.commission}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card bor" style="height: calc( 100% - 188px - 43px ) ; display: flex;align-items: center; flex-direction: row; ">
                                <div class="card-dth2" style="display: flex; align-items: center; justify-content: space-between;width: 100%;">
                                    <div style="flex: 1;">
                                        <canvas id="wxData" width="170" height="170"></canvas>
                                    </div>
                                    <div style="flex: 1;font-size: 18px;">
                                        <div>
                                            <span style="color: #999999FF;margin-right: 20px;">实时访问量</span> <strong>{$branch.todayArticleViews}</strong>
                                        </div>
                                        <div>
                                            <span style="color: #999999FF;margin-right: 20px;">昨日访问量</span> <strong>{$branch.yesTodayArticleViews}</strong>
                                        </div>
                                        <div>
                                            <span style="color: #999999FF;margin-right: 20px;">本月新增知识</span> <strong>{$branch.monthCreateArticle}</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


                <div class="row" style="width: 100%;margin: 0 15px;">

                    <div class="col-md-12">
                        <div class="row">
                            <div class="" style="width: 100%;">
                                <div class="card bor">
                                    <div class="card-dth">
                                        <div class="d-fix">
                                            <div class="user-name" style="width: 100%; text-align: left;padding-left: 20px;">
                                                <!-- {$sourceName}数据 -->
                                                身份数据
                                            </div>
                                            <div class="identityItem">

                                                <!-- <canvas id="identityData" width="500" height="282.5"></canvas> -->
                                                <canvas id="identityData"></canvas>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                <div class="list" style="width: 100%;margin: 0 15px;">
                    <div class="list-title">
                        <div class="item activeBtn" onclick="add()" style="margin-right:0">✚ 发布</div>

                        <div class="action-right" style="margin-left: 1rem;">
                            <div class="input-group">
                                <input type="text" name="keywords" id="keywords" autofocus="autofocus" value="{$Request.get.keywords}" class="form-control" placeholder="标题" aria-describedby="button-addon1">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-light" type="submit" id="button-addon1">
                                    <i data-feather="search"></i>
                                </button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="app-block">
                        <div class="app-content">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <table id="linkstable" lay-filter="linkstable"></table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <input id="datas1" type="hidden" value="{$identityArticleData}" name="datas1">


                </div>
            </div>
        </div>
        {include file="public/footer"/}
    </div>
    <script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
    <script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
    <script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
    <script src="__STATIC__/assets/js/examples/dashboard.js"></script>
    <script src="__STATIC__/assets/js/examples/echarts.js"></script>
    <script src="__STATIC__/assets/js/custom.js"></script>
    <script type="text/html" id="barDemo">
        {{# if(d.status == 1) { }}
        <button onclick="changeStatus({{d.id}})" class="btn btn-sm btn-outline-warning">隐藏</button><br> {{# } else { }}
        <button onclick="changeStatus({{d.id}})" class="btn btn-sm btn-outline-secondary">显示</button><br> {{# } }}
        <button onclick="edit({{d.id}})" class="btn btn-sm btn-outline-secondary">编辑</button><br>
        <button onclick="del({{d.id}})" class="btn btn-sm btn-outline-secondary">删除</button>
    </script>
    <script>
        $('.list-title .item').click(function(e) {
            $('.list-title .item').removeClass('activeBtn')
            $(e.target).addClass('activeBtn')
            if ($(e.target).text() === '全部') {
                $('#allDataTotal').css('display', 'flex')
                $('#userData').css('display', 'none')
            } else {
                $('#userData').css('display', 'flex')
                $('#allDataTotal').css('display', 'none')

            }
        })


        function omitBoxClick(e) {
            let val = $(e).next().css('opacity')
            if (val == 0) {
                $(e).next().css('opacity', '1')
            } else if (val == 1) {
                $(e).next().css('opacity', '0')
            }
        }

        // 初始请求
        var uri = window.location.search.split('=')[1];
        console.log(uri);
        var source = uri ? uri : "{$source}";
        console.log(source);
        var keyword = '';
        var layer = '';
        layui.use('layer', function() {
            layer = layui.layer;
        });

        var url = '{:url("/lore/loreAdd")}';
        var editUrl = '{:url("/lore/loreEdit")}';
        var changeUrl = '{:url("/lore/changeStatus")}';
        if (source == 2) {
            url = '{:url("/lore/knowledgeAdd")}';
            editUrl = '{:url("/lore/knowledgeEdit")}';
            changeUrl = '{:url("/lore/knowledgeChangeStatus")}';
        } else if (source == 3) {
            url = '{:url("/lore/caseStudyAdd")}';
            editUrl = '{:url("/lore/caseStudyEdit")}';
            changeUrl = '{:url("/lore/caseStudyChangeStatus")}';
        }

        // 添加
        function add() {
            window.location.href = url;
        }

        // 编辑
        function edit(id) {
            window.location.href = editUrl + '?id=' + id;
        }

        // 状态
        function changeStatus(id) {
            layer.confirm('修改该数据状态?', {
                icon: 3,
                title: '提示'
            }, function(index) {
                $.post(changeUrl, {
                    id: id,
                    type: 1
                }, function(data) {
                    if (data['code'] != 1) {
                        toastr.error(data['msg']);
                    } else {
                        window.location.reload();
                    }
                });
                layer.close(index);
            });
        }

        // 删除
        function del(id) {
            layer.confirm('删除该数据?', {
                icon: 3,
                title: '提示'
            }, function(index) {
                $.post(changeUrl, {
                    id: id
                }, function(data) {
                    if (data['code'] != 1) {
                        toastr.error(data['msg']);
                    } else {
                        window.location.reload();
                    }
                });
                layer.close(index);
            });
        }
        //获取社群列表
        initcommList(source);

        function initcommList(t, k) {
            // 1=>企业微信  2=>社群知识  3=>社群案例
            var url = "{:url('/lore/index')}";
            if (t == 2) {
                url = "{:url('/lore/knowledge')}";
            } else if (t == 3) {
                url = "{:url('/lore/caseStudy')}";
            }
            console.log(url)
                // layui插件
            layui.use('table', function() {
                var table = layui.table,
                    form = layui.form;
                // 表格初始化
                table.render({
                    elem: '#linkstable',
                    skin: 'line' //行边框风格
                        ,
                    even: true //开启隔行背景
                        ,
                    url: url,
                    method: 'post',
                    page: true //开启分页
                        ,
                    where: {
                        source: t,
                        keywords: k
                    },
                    cols: [
                        [{
                            field: 'id',
                            title: '序号'
                        }, {
                            field: 'rid',
                            title: '社群ID'
                        }, {
                            field: 'cate_name',
                            title: '分类'
                        }, {
                            field: 'title',
                            title: '标题',
                            width: 250
                        }, {
                            field: 'cover',
                            title: '封面',
                            width: 80,
                            templet: function(d) {
                                return '<div><img class="otherimages"  src="' + d.cover + '" ' + 'alt="" title="点我查看原图" onclick="lookimg(this.src)"></a></div>';
                            }
                        }, {
                            field: 'views',
                            title: '阅读量'
                        }, {
                            field: 'enroll_name',
                            title: '发布人'
                        }, {
                            field: 'create_time',
                            title: '创建时间',
                            width: 180
                        }, {
                            field: 'rightbtn',
                            title: '操作',
                            toolbar: '#barDemo'
                        }]
                    ],
                    done: function(res) {
                        var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                        element.css('overflow', 'visible');
                        element.children('.dropdown-menu').css('min-width', 'auto');
                    },
                    parseData: function(res) {
                        return {
                            "code": res.code,
                            "msg": res.msg,
                            "count": res.data.count,
                            "data": res.data.list
                        };
                    }
                });

                // 搜索
                $('#button-addon1').on('click', function() {
                    var keywords = $("#keywords").val();
                    table.reload('linkstable', {
                        url: url,
                        where: {
                            keywords: keywords // 搜索参数
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                });

            });
        }

        // 访问数据
        var chartDom1 = document.getElementById('viewData');
        var resizeMyChartContainer = function() {
            let domWidth = $('.card-dth').width();
            chartDom1.style.width = domWidth + 'px';
            chartDom1.style.height = (domWidth / 2) - 155 + 'px';
        };
        resizeMyChartContainer();
        let viewLabels = "{$access.articleViewsLine.labels}";
        let viewDatas = "{$access.articleViewsLine.datas}";
        let viewDatas1 = "{$access.currentArticleViewsLine.datas}";
        let viewDataDay = viewLabels.split(',');
        let viewDataValue = viewDatas.split(',');
        let viewDataValue1 = viewDatas1.split(',');
        console.log(viewDataValue, viewDataValue1)
        var myChart1 = echarts.init(chartDom1);
        var option;
        option = {
            title: {
                // text: '堆叠区域图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: viewDataDay,
                gridLines: {
                    display: false
                },
                //y轴刻度
                axisTick: {
                    show: false
                },
                //y轴刻度标签数字
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#8557C3FF' //y轴标签颜色
                    }
                },
            }],
            yAxis: [{
                type: 'value'
            }],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '6%',
                top: '8%',
                containLabel: true
            },
            series: [{
                // name: '需求总数\n{c|{}}',
                type: 'line',
                // stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#406CE5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#F2FBFFFF',
                    } //改变区域颜色
                },
                data: viewDataValue,
            }, {
                // name: '当月新增\n{c|{}}',
                type: 'line',
                // stack: '总量',
                areaStyle: {},
                itemStyle: {
                    normal: {
                        color: '#FF00FFFF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#F9F6FFFF',
                    } //改变区域颜色
                },
                emphasis: {
                    focus: 'series'
                },
                data: viewDataValue1
            }, ]
        };
        option && myChart1.setOption(option);
        myChart1.resize();
        window.onresize = function() {
            resizeMyChartContainer();
            myChart1.resize();
        };

        // 身份数据
        var chartDom2 = document.getElementById('identityData');
        var resizeMyChartContainer2 = function() {
            let domWidth = $('.card-dth').width();
            console.log(111)
            console.log(domWidth);;
            chartDom2.style.width = (domWidth) + 'px';
            chartDom2.style.height = 270 + 'px';
        };
        resizeMyChartContainer2();
        var myChart2 = echarts.init(chartDom2);
        var str = $('#datas1').val().split('&&');
        var nameStr = str[0].split(';');
        var valueStr = str[1].split(';');
        console.log(str, nameStr, valueStr);
        var result = [];
        for (var i = 0; i < nameStr.length; i += 4) {
            result.push(nameStr.slice(i, i + 4));
        }
        var text = 0;
        for (var i = 0; i < valueStr.length; i++) {
            text += parseInt(valueStr[i]);
        }
        var arr = result[0];
        var arr1 = result[1];
        var option2 = {
            title: '',
            tooltip: {
                trigger: 'item'
            },
            legend: [{
                top: 'center',
                icon: 'circle',
                left: '35%',
                data: [arr[0], arr[1]],
                orient: 'vertical',
                // height:700,
                itemGap: 40,
                textStyle: {
                    rich: {
                        a: {
                            color: '#2F3133FF',
                            lineHeight: 20,
                        },
                        b: {
                            fontSize: 16
                        },
                        c: {
                            width: '200',
                            height: 10,
                            fontSize: 16,
                            color: '#2F3133FF'
                        }
                    }
                }
            }, {
                top: 'center',
                icon: 'circle',
                left: '50%',
                data: [arr[2], arr[3]],
                orient: 'vertical',
                // height:700,
                itemGap: 40,
                textStyle: {
                    rich: {
                        a: {
                            color: '#2F3133FF',
                            lineHeight: 20,
                        },
                        b: {
                            fontSize: 16
                        },
                        c: {
                            width: '200',
                            height: 10,
                            fontSize: 16,
                            color: '#2F3133FF'
                        }
                    }
                }
            }, {
                top: 'center',
                icon: 'circle',
                left: '65%',
                data: [arr1[0], arr1[1]],
                orient: 'vertical',
                // height:700,
                itemGap: 40,
                textStyle: {
                    // fontSize: 16,
                    // height:40,
                    rich: {
                        a: {
                            // color: '#999',
                            lineHeight: 20,
                        },
                        b: {
                            fontSize: 16
                        },
                        c: {
                            width: '200',
                            height: 10,
                            fontSize: 16,
                        }
                    }
                }
            }, {
                top: 'center',
                icon: 'circle',
                left: '80%',
                data: [arr1[2], arr1[3]],
                orient: 'vertical',
                // height:700,
                itemGap: 40,
                textStyle: {
                    // fontSize: 16,
                    // height:40,
                    rich: {
                        a: {
                            // color: '#999',
                            lineHeight: 20,
                        },
                        b: {
                            fontSize: 16
                        },
                        c: {
                            width: '200',
                            height: 10,
                            fontSize: 16,
                        }
                    }
                }
            }, ],
            //环形中间文字
            graphic: [
                //第一行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: '16%',
                    top: '40%',
                    style: {
                        //value当前进度
                        text: text,
                        textAlign: 'center',
                        fill: '#19191A',
                        fontSize: 34,
                        fontWeight: 'bold'
                    }
                },
                //第二行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: '15%',
                    top: '56%',
                    style: {
                        //maxValue进度条最大值
                        text: '身份数据',
                        textAlign: 'center',
                        fill: '#19191A',
                        fontSize: 16
                    }
                }
            ],
            series: [ //系列列表
                {
                    name: '', //系列名称
                    type: 'pie', //类型 pie表示饼图
                    radius: ['55%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    center: ['18%', '50%'], //控制饼图位置
                    itemStyle: { //图形样式

                        //  emphasis:{
                        // shadowBlur: 10 ,
                        // shadowOffsetX: 0 ,
                        // shadowColor: '#fff'
                        //  },
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            borderWidth: 5, //宽度
                            borderColor: '#fff',
                            label: { //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: { //标签的视觉引导线样式
                                show: false //平常不显示
                            }
                        },

                    },
                    label: {
                        normal: {
                            show: false, //展示
                            position: 'outside', // outside表示文本显示位置为外部
                            textStyle: {}
                        },
                        //  emphasis: {    //文本样式
                        //      show: true,    //展示
                        //      textStyle: {    //文本样式
                        //          fontSize: '14',
                        //          fontWeight: '600',
                        //      }
                        //   }
                    },
                    labelLine: { //引导线设置
                        //     normal: {
                        //          show: true,   //引导线显示
                        // length: 40 ,
                        //     }
                    },
                    data: [{
                            value: valueStr[0],
                            name: arr[0],
                            itemStyle: {
                                normal: {
                                    color: '#8FDFFEFF'
                                }
                            }
                        }, {
                            value: valueStr[1],
                            name: arr[1],
                            itemStyle: {
                                normal: {
                                    color: '#0621E8FF'
                                }
                            }
                        }, {
                            value: valueStr[2],
                            name: arr[2],
                            itemStyle: {
                                normal: {
                                    color: '#915BFFFF'
                                }
                            }
                        }, {
                            value: valueStr[3],
                            name: arr[3],
                            itemStyle: {
                                normal: {
                                    color: '#3793FAFF'
                                }
                            }
                        },

                        {
                            value: valueStr[4],
                            name: arr1[0],
                            itemStyle: {
                                normal: {
                                    color: '#FF6363FF'
                                }
                            }
                        }, {
                            value: valueStr[5],
                            name: arr1[1],
                            itemStyle: {
                                normal: {
                                    color: '#5B78FFFF'
                                }
                            }
                        }, {
                            value: valueStr[6],
                            name: arr1[2],
                            itemStyle: {
                                normal: {
                                    color: '#E6A500FF'
                                }
                            }
                        }, {
                            value: valueStr[7],
                            name: arr1[3],
                            itemStyle: {
                                normal: {
                                    color: '#FA32A3FF'
                                }
                            }
                        },
                    ],

                }, {
                    name: '', //系列名称
                    type: 'pie', //类型 pie表示饼图
                    radius: ['45%', '52%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    center: ['18%', '50%'], //控制饼图位置
                    itemStyle: { //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            borderWidth: 5, //宽度
                            borderColor: '#fff',
                            label: { //饼图图形上的文本标签
                                // show: false  //平常不显示
                            },
                            labelLine: { //标签的视觉引导线样式
                                show: false //平常不显示
                            }
                        },

                    },
                    label: {
                        normal: {
                            show: false, //展示
                            position: 'outside', // outside表示文本显示位置为外部
                        },
                    },
                    data: [{
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        }, {
                            value: 5,
                            itemStyle: {
                                normal: {
                                    color: '#ABBBC6FF'
                                }
                            },
                        },


                    ],

                }
            ]
        };
        myChart2.setOption(option2);
        myChart2.resize();


        // 企业微信数据
        var chartDom = document.getElementById('wxData');
        var myChart = echarts.init(chartDom);
        var option = {
            title: {
                //标题内容
                textStyle: {
                    fontWeight: 'bold',
                    fontFamily: 'Microsoft YaHei',
                    fontSize: 24
                },
                //标题位置
                top: '5%',
                left: '5%'
            },
            //环形中间文字
            graphic: [
                //第一行文字
                //内容 + 位置
                {
                    type: 'text',
                    left: 'center',
                    top: '40%',
                    style: {
                        //value当前进度
                        text: "{$branch.totalArticle}",
                        textAlign: 'center',
                        fill: '#FF5D39FF',
                        fontSize: 22,
                        fontWeight: 'bold',

                    }
                }, {
                    type: 'text',
                    left: 'center',
                    top: '55%',
                    style: {
                        //value当前进度
                        text: "文章总数",
                        textAlign: 'center',
                        fill: '#999999FF',
                        fontWeight: 'bold',
                    }
                },
            ],
            series: [{
                type: 'pie',
                radius: ['61%', '53%'], //['外圆大小', '内圆大小']
                center: ['50%', '50%'], //圆心位置['左右'， '上下']
                hoverAnimation: false, //取消鼠标悬停动画
                animationEasing: 'cubicOut', //设置动画缓动效果
                //取消显示饼图自带数据线条
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                //增加阴影效果
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(44, 196, 196, 0.8)'
                    }
                },
                data: [
                    //(maxValue进度条最大值 - value当前进度) + 颜色
                    // {
                    //     value: "",
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#E0E0E0'
                    //         }
                    //     }
                    // },
                    //value当前进度 + 颜色
                    {
                        value: "{$branch.totalArticle}",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#ff4438FF'
                                    }, {
                                        offset: 1,
                                        color: '#ffa13bFF'
                                    }])
                            }
                        }
                    },
                ]
            }]
        };
        myChart.setOption(option);
    </script>

    <style>
        .u-left {
            margin-right: 98px;
        }
        
        .icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: #5B78FFFF;
            margin-top: 3px;
        }
        
        .omitBox,
        .omitBox2 {
            opacity: 0;
            position: absolute;
            top: 135%;
            left: -35%;
            width: 126px;
            height: 145px;
            background-color: #fff;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
            z-index: 99;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: column;
        }
        
        .omitBox:before {
            content: '';
            position: absolute;
            top: -7%;
            right: 23%;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 11px solid #f3f3f3;
        }
        
        .omitBox2:before {
            content: '';
            position: absolute;
            top: -7%;
            right: 7%;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 11px solid #f3f3f3;
        }
        
        .omitBox text,
        .omitBox2 text {
            font-weight: 0;
            font-size: 16px;
            color: #9D9D9DFF;
        }
        
        .totalDataTitle {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 80%;
        }
        
        .totalDataTitle .item {
            margin-top: 20px;
        }
        
        .totalDataTitle .item p {
            color: #999999FF;
        }
        
        .totalDataTitle .item span {
            font-size: 24px;
            color: #E6A500FF;
        }
        
        .totalDataTitle .item:nth-child(1) span {
            color: #5B78FFFF;
        }
    </style>
    <style>
        .activeBtn {
            color: #fff !important;
            background-color: #3F6EFFFF !important;
        }
        
        .list-title {
            display: flex;
            align-items: center;
        }
        
        .list-title .item {
            font-size: 14px;
            border-radius: 3px;
            background-color: #B9B9B9;
            color: #999999FF;
            display: grid;
            place-items: center;
            margin-right: 45px;
            cursor: pointer;
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .box-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .box-bottom .bt-item {
            width: 47%;
            background-color: #FDFBF2FF;
            margin: 5px;
            height: 77px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        
        .box-bottom .bt-item .title {
            color: #666666FF;
            font-size: 16px;
        }
        
        .box-bottom .bt-item span {
            color: #0DA877FF;
            font-size: 18px;
        }
        
        .box-bottom .bt-item strong {
            margin-left: 30px;
            font-size: 22px;
        }
        
        .box-bottom .bt-item:nth-child(2) strong {
            margin-left: 15px;
        }
        
        .d-center {
            display: flex;
        }
        
        .d-center .item {
            margin: 50px 0 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .d-center .item:nth-child(2) {
            flex: 2;
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        
        .d-center .item span {
            color: #999999FF;
        }
        
        .d-center .item p {
            margin-top: 7px;
            font-size: 24px;
            color: #E6A500FF;
            font-weight: 600;
        }
        
        .d-center .item:nth-child(1) p {
            color: #5B78FFFF;
        }
        
        .identityItem {
            flex: 2;
        }
        
        .wxItem {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .wxItem div {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .wxItem div span {
            color: #999999FF;
            margin-right: 15px;
        }
        
        .wxItem div strong {
            font-size: 20px;
        }
        
        .add {
            background: rgba(63, 110, 255, 0) !important;
            border: 1px solid #3F6EFF;
            border-radius: 6px;
            color: #3F6EFF !important;
        }
        
        .sel-dfx {
            display: flex;
            justify-content: space-between;
            margin: auto;
        }
        
        .sel-mat-top {
            margin-top: 40px;
            margin-bottom: 40px;
        }
        
        .avt {
            background: #3F6EFF !important;
            color: #FFFFFF !important;
        }
        
        .sel-bottom {
            background: #F0F0F0;
            border-radius: 3px;
            cursor: pointer;
            color: #999999;
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .sel-bottom:active {
            background: #3377FF;
        }
        
        .card-dth {
            padding: 8px;
        }
        
        .user-name {
            font-size: 16px;
            font-family: 'AliM';
            font-weight: 500;
            color: #0E1525;
            margin-left: 10px;
            text-align: left;
        }
        
        .user {
            display: flex;
            width: 96%;
            margin: auto;
            color: #0E1525;
        }
        
        .bg-txt {
            display: flex;
            margin-top: 5px;
        }
        
        .str {
            font-size: 12px;
            margin-left: 3px;
            color: #999999;
        }
        
        .d-fix {
            display: flex;
            /* padding-top: 25px; */
            padding-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .rig-img img {
            width: 9rem;
            height: 9rem;
        }
        
        .j {
            background: #5B78FF;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .bz {
            background: #22b9ff;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .dy {
            background: #28a745;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .jn {
            background: #F74AFF;
            width: 10px;
            height: 10px;
            margin-top: 3px;
        }
        
        .bg-str {
            font-family: 'AliM';
            text-align: left;
            position: relative;
            font-size: 24px;
        }
        
        .u-rig {
            display: flex;
            justify-content: flex-end;
            padding-top: 10px;
            flex: 1;
        }
        
        .txt-cen {
            text-align: center;
        }
        
        .list {
            background: white;
            /*height: 100vh;*/
            padding: 20px;
            border-radius: 5px;
        }
        
        .uname {
            font-size: 18px;
            font-family: 'AliM';
            margin-bottom: 15px;
        }
        
        .fix-d {
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
        }
        
        .d-th {
            padding-left: 10px;
            text-align: center;
        }
        
        .numer {
            font-size: 21px;
            font-family: 'AliM';
            font-weight: 600;
        }
        
        .t {
            color: #576AFB;
        }
        
        .d-str {
            font-size: 12px;
            font-family: 'AliM';
            margin-top: 5px;
        }
        
        .d-add {
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
        }
        
        .b {
            color: #FF6739;
        }
        
        .w {
            color: #00A0FF;
        }
        
        .keword {
            display: flex;
        }
        
        .key-input {
            padding-left: 8px;
            border: 1px solid #e2d7d7;
            border-radius: 6px;
            width: 200px;
        }
        
        .key-bottom {
            margin-left: 10px;
            background: #007bff;
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 34px;
            line-height: 30px;
            color: white;
            height: 30px;
            margin-top: 5px;
            cursor: pointer
        }
        
        .key-bottom:active {
            background: #71a2d8;
        }
    </style>
    </body>

    </html>